<!-- 红人推荐卡片 -->
<template>
    <div id="hongRenRecom" v-if="data.id">
        <div
            v-for="(item, index) in data.goods_list"
            :key="index"
            :class="classnames[index]"
        >
            <div class="goodsImage">
                <img :src="item.goods_image" alt="goods" />
            </div>
            <div class="goodsName">{{ item.goods_name }}</div>
            <div class="goodsInfo">
                <span>&yen;{{ item.goods_price }}</span>
                <label v-if="item.goods_hj_price"
                    >&yen;{{ item.goods_hj_price }}</label
                >
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "hongRenRecom",
    data() {
        return {
            classnames: ["one", "two", "three"]
        };
    },
    props: ["data"]
};
</script>

<style scoped lang="stylus">
#hongRenRecom {
    width: 670px;
    height: 804px;
    margin: 0 auto 40px;
    box-shadow: 0 0.2rem 0.6rem 0 rgba(19, 19, 20, 0.16);
    border-radius: 40px;
    overflow: hidden;
    background: url('https://static.huajuanmall.com/subject/o_1dl6iffof13fkmecfs8ttvcbu28.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.one, .two, .three {
    position: absolute;
}

.one {
    width: 300px;
    left: 50%;
    bottom: 280px;
    transform: translate(-50%);
}

.one .goodsName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.one .goodsInfo {
    text-align: center;
}

.two {
    width: 190px;
    left: 20px;
    bottom: 140px;
}

.three {
    width: 180px;
    right: 10px;
    bottom: 110px;
}

.two .goodsName, .three .goodsName {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.one .goodsImage {
    width: 210px;
    height: 210px;
}

.two .goodsImage, .three .goodsImage {
    width: 116px;
    height: 116px;
}

.goodsImage {
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
}

.goodsImage img {
    display: block;
    width: 100%;
}

.goodsName, .goodsInfo {
    margin-top: 14px;
    color: #fff;
}

.goodsInfo label {
    color: #f7cfd1;
    text-decoration: line-through;
    margin: 0 0 0 10px;
}
</style>